<template>
  <div class="box">
    <div class="mask"></div>
    <el-form 
      :model="form" 
      class="form" 
      label-width="120px"
      ref="formRef"
      :rules="rules"
    >
      <h2 class="title">
        <span>{{ student.id ? '修改信息' : '添加学生' }}</span>
        <el-icon :size="20" class="close" @click="myClose"><Close /></el-icon>
      </h2>
      <el-form-item label="学号：" prop="sno">
        <el-input v-model="form.sno" placeholder="请输入学号" />
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio-group v-model="form.sex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model.number="form.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="联系方式：" prop="telephone">
        <el-input v-model="form.telephone" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item label="专业：" prop="major">
        <el-input v-model="form.major" placeholder="请输入专业名称" />
      </el-form-item>
      <el-form-item label="班级：" prop="bj">
        <el-input v-model="form.bj" placeholder="请输入班级" />
      </el-form-item>
      <el-form-item label="寝室：" prop="dorm">
        <el-input v-model="form.dorm" placeholder="请输入寝室" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(formRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'

export default {
  components: {
    Close
  },
  props: {
    student: Object
  },
  setup(props, { emit }) {
    const { student } = props
    const Obj = {
      sno: '',
      name: '',
      sex: '男',
      age: '',
      telephone: '',
      major: '',
      bj: '',
      dorm: '',
    }
    const form = reactive( student.id ? student : Obj )

    /* 表单验证 start */
    const formRef = ref(null)
    // 学号验证
    const validatePass = (_, value, callback) => {
      const reg = /^[1-2]{1}[0-9]{7}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入8位以1或2开头的学号'))
      }
    }
    // 姓名验证
    const validatePass2 = (_, value, callback) => {
      const reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入2~16位的中文名'))
      }
    }
    // 年龄验证
    const validatePass3 = (_, value, callback) => {
      const reg = /^[0-9]{2}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入2位数年龄'))
      }
    }
    // 联系方式验证
    const validatePass4 = (_, value, callback) => {
      const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('手机号格式错误'))
      }
    }
    // 专业验证
    const validatePass5 = (_, value, callback) => {
      const reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入中文专业名称'))
      }
    }
    // 班级验证
    const validatePass6 = (_, value, callback) => {
      const reg = /^[1-2]{1}[0-9]{3}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入4位数字班级称号'))
      }
    }
    // 寝室验证
    const validatePass7 = (_, value, callback) => {
      const reg = /^[1-9]{1}[1-9]{1}[0-9]{2}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入4位数字寝室号'))
      }
    }
    const rules= reactive({
      sno: [{ validator: validatePass, trigger: 'blur' }],
      name: [{ validator: validatePass2, trigger: 'blur' }],
      age: [{ validator: validatePass3, trigger: 'blur' }],
      telephone: [{ validator: validatePass4, trigger: 'blur' }],
      major: [{ validator: validatePass5, trigger: 'blur' }],
      bj: [{ validator: validatePass6, trigger: 'blur' }],
      dorm: [{ validator: validatePass7, trigger: 'blur' }],
    })
    /* 表单验证 end */

    // 提交数据
    const onSubmit = (formEl) => {
      if (!formEl) return
      formEl.validate(async(valid) => {
        // 校验成功
        if (valid) {
          if(student.id) {
            // 修改
            emit('childUpdateStudent', form)
          } else {
            // 添加
            emit('childAddStudent', form)
          }
          emit('myShow', false)
        } else {
          // 校验失败
          ElMessage.error('请正确填写表单')
          return false
        }
      })
    }
    // 关闭添加框
    const myClose = () => {
      emit('myShow', false)
    }
    return {
      form,
      rules,
      formRef,
      onSubmit,
      myClose
    }
  }
}
</script>
<style scoped lang='scss'>
.box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  .mask {
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-color: #000;
  }
  .form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 0 25px;
      height: 50px;
      font-size: 14px;
      background-color: #eee;
      .close {
        cursor: pointer;
      }
    }
    .el-form-item {
      margin-right: 100px;
      :deep(.el-input__inner){
        width: 300px;
      }
    }
  }
}
</style>